<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            margin: 20px;
        }

        .message-box {
            display: flex;

            .content {
                width: 320px;
                height: 45px;
                box-sizing: border-box;
                outline: none;
            }

            .btn {
                width: 80px;
                height: 45px;
            }
        }

        .message-list {
            line-height: 32px;
            font-size: 13px;

            & li {
                margin-top: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="message-box">
            <input class="content" type="text"><button class="btn">发送</button>
        </div>
        <ul class="message-list">
            <!-- <li></li> -->
        </ul>
    </div>
</body>
<script>

    var conInp = document.getElementsByClassName("content")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var messageList = document.getElementsByClassName("message-list")[0];


    // 字节统计: 一个英文=>一个字节  一个中文=>两个字节 
    
    // 1k = 1024byte
    // 1M = 1024k
    // 1g = 1024M
    // 1t = 1024G

    // 点击发送
    btn.onclick = function () {
        // 输出的内容
        var content = conInp.value;
        content = content.replace(/\s/g, ""); 

        // JS中字符串的长度表示字符个数 => 无论中文和英文都是一个字符
        // console.log(content.length);

        // 字节统计
        // (1) 自行统计  => 一个英文=>一个字节  一个中文=>两个字节 
        // var count = 0;
        // for(var char of content){  // 遍历字符串取出每一个字符
        //     var reg = /[\u4e00-\u9fa5]/; 
        //     if(reg.test(char)){  // 判断字符是否是中文
        //         count += 2;
        //     }else{
        //         count ++;
        //     }
        // }
        // console.log(count);


        // (2) content.length做字符统计时, 一个中文算一个
        //     字节统计时, 一个中文2个字节
        //     =>  content.length中每个中文就少算一个

        // 取出所有中文, 有几个就加几

        var count = content.length;  // 字符个数
        var reg = /[\u4e00-\u9fa5]/g;
        var arr = content.match(reg);  // 有中文 => 数组  没有 => null
        // console.log(arr);
        if(arr){
            count += arr.length; // 有几个中文就加几个字节
        }
        console.log(count);







    
       


       
    }

  
</script>

</html>